<!DOCTYPE html>
<!-- This site was created with Wowchemy. https://www.wowchemy.com -->
<!-- Last Published: September 28, 2023 --><html lang="en-us" >


<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
  
  
    <meta name="generator" content="Wowchemy 5.7.0 for Hugo" />
  

  
  












  
  










  







  
  
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  

  
  
  
    
      
      <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto+Mono&family=Roboto:wght@400;700&display=swap">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto+Mono&family=Roboto:wght@400;700&display=swap" media="print" onload="this.media='all'">
    
  

  
  

  
  
    
    <script src="/js/mathjax-config.js"></script>
  

  

  <link rel="stylesheet" href="/css/vendor-bundle.min.16f785cdb553c8c4431db6775122af35.css" media="print" onload="this.media='all'">

  
  
  
    
    
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/academicons@1.9.2/css/academicons.min.css" integrity="sha512-KlJCpRsLf+KKu2VQa5vmRuClRFjxc5lXO03ixZt82HZUk41+1I0bD8KBSA0fY290ayMfWYI9udIqeOWSu1/uZg==" crossorigin="anonymous" media="print" onload="this.media='all'">
    

    
    
    
    
      
      
    
    
    

    
    
    

    

    
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" integrity="" crossorigin="anonymous" async></script>
      
    
      
      

      
      

      
    
      
      

      
      

      
    
  

  
  
  
  
  
  
  <link rel="stylesheet" href="/css/wowchemy.0f229d4b7ebad1917a9a357cba2effab.css" />

  
  
  

  
  
  
  
  
  
  
    
    
    <link rel="stylesheet" href="/css/libs/chroma/github-light.min.css" title="hl-light" media="print" onload="this.media='all'" >
    <link rel="stylesheet" href="/css/libs/chroma/dracula.min.css" title="hl-dark" media="print" onload="this.media='all'" disabled>
  

  
  


























  
  
  






  <meta name="author" content="Hongguo Zhang" />





  

<meta name="description" content="Learn how to blog in Academic using Jupyter notebooks" />



<link rel="alternate" hreflang="en-us" href="https://hgzhangs.github.io/post/jupyter/" />
<link rel="canonical" href="https://hgzhangs.github.io/post/jupyter/" />



  <link rel="manifest" href="/manifest.webmanifest" />



<link rel="icon" type="image/png" href="/media/icon_hue99c53d11914103ae6c1c57e14f952af_340124_32x32_fill_lanczos_center_3.png" />
<link rel="apple-touch-icon" type="image/png" href="/media/icon_hue99c53d11914103ae6c1c57e14f952af_340124_180x180_fill_lanczos_center_3.png" />

<meta name="theme-color" content="#1565c0" />










  






<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://hgzhangs.github.io/post/jupyter/featured.png" />
<meta property="og:site_name" content="Hongguo Zhang" />
<meta property="og:url" content="https://hgzhangs.github.io/post/jupyter/" />
<meta property="og:title" content="Display Jupyter Notebooks with Academic | Hongguo Zhang" />
<meta property="og:description" content="Learn how to blog in Academic using Jupyter notebooks" /><meta property="og:image" content="https://hgzhangs.github.io/post/jupyter/featured.png" /><meta property="og:locale" content="en-us" />

  
    <meta
      property="article:published_time"
      content="2019-02-05T00:00:00&#43;00:00"
    />
  
  
    <meta property="article:modified_time" content="2019-09-05T00:00:00&#43;00:00">
  






    






  




<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://hgzhangs.github.io/post/jupyter/"
  },
  "headline": "Display Jupyter Notebooks with Academic",
  
  "image": [
    "https://hgzhangs.github.io/post/jupyter/featured.png"
  ],
  
  "datePublished": "2019-02-05T00:00:00Z",
  "dateModified": "2019-09-05T00:00:00Z",
  
  "author": {
    "@type": "Person",
    "name": "Hongguo Zhang"
  },
  
  "publisher": {
    "@type": "Organization",
    "name": "Hongguo Zhang",
    "logo": {
      "@type": "ImageObject",
      "url": "https://hgzhangs.github.io/media/icon_hue99c53d11914103ae6c1c57e14f952af_340124_192x192_fill_lanczos_center_3.png"
    }
  },
  "description": "Learn how to blog in Academic using Jupyter notebooks"
}
</script>

  

  




  
  
  

  
  

  


  
  <title>Display Jupyter Notebooks with Academic | Hongguo Zhang</title>

  
  
  
  











</head>


<body id="top" data-spy="scroll" data-offset="70" data-target="#TableOfContents" class="page-wrapper   " data-wc-page-id="6e929dc84ed3ef80467b02e64cd2ed64" >

  
  
  
  
  
  
  
  
  
  <script src="/js/wowchemy-init.min.ec9d49ca50e4b80bdb08f0417a28ed84.js"></script>

  




  <div class="page-header header--fixed">
  
  
  
  
  












<header>
  <nav class="navbar navbar-expand-lg navbar-light compensate-for-scrollbar" id="navbar-main">
    <div class="container-xl">

      
      <div class="d-none d-lg-inline-flex">
        <a class="navbar-brand" href="/">Hongguo Zhang</a>
      </div>
      

      
      <button type="button" class="navbar-toggler" data-toggle="collapse"
              data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
      <span><i class="fas fa-bars"></i></span>
      </button>
      

      
      <div class="navbar-brand-mobile-wrapper d-inline-flex d-lg-none">
        <a class="navbar-brand" href="/">Hongguo Zhang</a>
      </div>
      

      
      
      <div class="navbar-collapse main-menu-item collapse justify-content-start" id="navbar-content">

        
        <ul class="navbar-nav d-md-inline-flex">
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
              
              
              
                
              
              
            
          

          <li class="nav-item">
            <a class="nav-link " href="/#about"><span>Home</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
              
              
              
                
              
              
            
          

          <li class="nav-item">
            <a class="nav-link " href="/#publications"><span>Publications</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
              
              
              
                
              
              
            
          

          <li class="nav-item">
            <a class="nav-link " href="/#posts"><span>Posts</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
              
              
              
                
              
              
            
          

          <li class="nav-item">
            <a class="nav-link " href="/#contact"><span>Contact</span></a>
          </li>

          
          

        

          
        </ul>
      </div>

      <ul class="nav-icons navbar-nav flex-row ml-auto d-flex pl-md-2">

        
        
          
        

        
        
        

        
        
        
        <li class="nav-item dropdown theme-dropdown">
          <a href="#" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-label="Display preferences">
            <i class="fas fa-moon" aria-hidden="true"></i>
          </a>
          <div class="dropdown-menu">
            <a href="#" class="dropdown-item js-set-theme-light">
              <span>Light</span>
            </a>
            <a href="#" class="dropdown-item js-set-theme-dark">
              <span>Dark</span>
            </a>
            <a href="#" class="dropdown-item js-set-theme-auto">
              <span>Automatic</span>
            </a>
          </div>
        </li>
        

        
        

      </ul>

    </div>
  </nav>
</header>


  </div>

  <div class="page-body">
    
    
    

    <article class="article">

  






















  
  


<div class="article-container pt-3">
  <h1>Display Jupyter Notebooks with Academic</h1>

  
  <p class="page-subtitle">Learn how to blog in Academic using Jupyter notebooks</p>
  

  


<div class="article-metadata">

  
  
  
  
  <div>
    

  <span class="author-highlighted">
      Hongguo Zhang</span>
  </div>
  
  

  
  <span class="article-date">
    
    
      
          Last updated on
      
    
    Sep 5, 2019
  </span>
  

  

  
  <span class="middot-divider"></span>
  <span class="article-reading-time">
    2 min read
  </span>
  

  
  
  
  

  
  

</div>

  





</div>


<div class="article-header article-container featured-image-wrapper mt-4 mb-4" style="max-width: 720px; max-height: 313px;">
  <div style="position: relative">
    <img src="/post/jupyter/featured_hub1daa031c2af6888ff37bd93eb033a1a_71549_720x2500_fit_q75_h2_lanczos_3.webp" width="720" height="313" alt="" class="featured-image">
    
  </div>
</div>



  <div class="article-container">

    <div class="article-style">
      <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">IPython.core.display</span> <span class="kn">import</span> <span class="n">Image</span>
</span></span><span class="line"><span class="cl"><span class="n">Image</span><span class="p">(</span><span class="s1">&#39;https://www.python.org/static/community_logos/python-logo-master-v3-TM-flattened.png&#39;</span><span class="p">)</span>
</span></span></code></pre></div><p>















<figure  >
  <div class="d-flex justify-content-center">
    <div class="w-100" ><img src="./index_1_0.png" alt="png" loading="lazy" data-zoomable /></div>
  </div></figure>
</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;Welcome to Academic!&#34;</span><span class="p">)</span>
</span></span></code></pre></div><pre><code>Welcome to Academic!
</code></pre>
<h2 id="install-python-and-jupyterlab">Install Python and JupyterLab</h2>
<p><a href="https://www.anaconda.com/distribution/#download-section" target="_blank" rel="noopener">Install Anaconda</a> which includes Python 3 and JupyterLab.</p>
<p>Alternatively, install JupyterLab with <code>pip3 install jupyterlab</code>.</p>
<h2 id="create-or-upload-a-jupyter-notebook">Create or upload a Jupyter notebook</h2>
<p>Run the following commands in your Terminal, substituting <code>&lt;MY-WEBSITE-FOLDER&gt;</code> and <code>&lt;SHORT-POST-TITLE&gt;</code> with the file path to your Academic website folder and a short title for your blog post (use hyphens instead of spaces), respectively:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">mkdir -p &lt;MY-WEBSITE-FOLDER&gt;/content/post/&lt;SHORT-POST-TITLE&gt;/
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> &lt;MY-WEBSITE-FOLDER&gt;/content/post/&lt;SHORT-POST-TITLE&gt;/
</span></span><span class="line"><span class="cl">jupyter lab index.ipynb
</span></span></code></pre></div><p>The <code>jupyter</code> command above will launch the JupyterLab editor, allowing us to add Academic metadata and write the content.</p>
<h2 id="edit-your-post-metadata">Edit your post metadata</h2>
<p>The first cell of your Jupter notebook will contain your post metadata (<a href="https://sourcethemes.com/academic/docs/front-matter/" target="_blank" rel="noopener">front matter</a>).</p>
<p>In Jupter, choose <em>Markdown</em> as the type of the first cell and wrap your Academic metadata in three dashes, indicating that it is YAML front matter:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: My post&#39;s title
</span></span><span class="line"><span class="cl">date: 2019-09-01
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"># Put any other Academic metadata here...
</span></span><span class="line"><span class="cl">---
</span></span></code></pre></div><p>Edit the metadata of your post, using the <a href="https://sourcethemes.com/academic/docs/managing-content" target="_blank" rel="noopener">documentation</a> as a guide to the available options.</p>
<p>To set a <a href="https://sourcethemes.com/academic/docs/managing-content/#featured-image" target="_blank" rel="noopener">featured image</a>, place an image named <code>featured</code> into your post&rsquo;s folder.</p>
<p>For other tips, such as using math, see the guide on <a href="https://wowchemy.com/docs/content/writing-markdown-latex/" target="_blank" rel="noopener">writing content with Academic</a>.</p>
<h2 id="convert-notebook-to-markdown">Convert notebook to Markdown</h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">jupyter nbconvert index.ipynb --to markdown --NbConvertApp.output_files_dir<span class="o">=</span>.
</span></span></code></pre></div><h2 id="example">Example</h2>
<p>This post was created with Jupyter. The orginal files can be found at <a href="https://github.com/gcushen/hugo-academic/tree/master/exampleSite/content/post/jupyter" target="_blank" rel="noopener">https://github.com/gcushen/hugo-academic/tree/master/exampleSite/content/post/jupyter</a></p>

    </div>

    







<div class="share-box">
  <ul class="share">
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fhgzhangs.github.io%2Fpost%2Fjupyter%2F&amp;text=Display&#43;Jupyter&#43;Notebooks&#43;with&#43;Academic" target="_blank" rel="noopener" class="share-btn-twitter" aria-label="twitter">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fhgzhangs.github.io%2Fpost%2Fjupyter%2F&amp;t=Display&#43;Jupyter&#43;Notebooks&#43;with&#43;Academic" target="_blank" rel="noopener" class="share-btn-facebook" aria-label="facebook">
          <i class="fab fa-facebook"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
        
      
      <li>
        <a href="mailto:?subject=Display%20Jupyter%20Notebooks%20with%20Academic&amp;body=https%3A%2F%2Fhgzhangs.github.io%2Fpost%2Fjupyter%2F" target="_blank" rel="noopener" class="share-btn-email" aria-label="envelope">
          <i class="fas fa-envelope"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fhgzhangs.github.io%2Fpost%2Fjupyter%2F&amp;title=Display&#43;Jupyter&#43;Notebooks&#43;with&#43;Academic" target="_blank" rel="noopener" class="share-btn-linkedin" aria-label="linkedin-in">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="whatsapp://send?text=Display&#43;Jupyter&#43;Notebooks&#43;with&#43;Academic%20https%3A%2F%2Fhgzhangs.github.io%2Fpost%2Fjupyter%2F" target="_blank" rel="noopener" class="share-btn-whatsapp" aria-label="whatsapp">
          <i class="fab fa-whatsapp"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://service.weibo.com/share/share.php?url=https%3A%2F%2Fhgzhangs.github.io%2Fpost%2Fjupyter%2F&amp;title=Display&#43;Jupyter&#43;Notebooks&#43;with&#43;Academic" target="_blank" rel="noopener" class="share-btn-weibo" aria-label="weibo">
          <i class="fab fa-weibo"></i>
        </a>
      </li>
    
  </ul>
</div>











  
  
    



  
  
  
    
  
  
  
  <div class="media author-card content-widget-hr">
    
      
      <a href="https://hgzhangs.github.io"><img class="avatar mr-3 avatar-circle" src="/authors/admin/avatar_hu68cd251b27d697f87d940180a76027a8_233991_270x270_fill_q75_lanczos_center.jpg" alt="Hongguo Zhang"></a>
    

    <div class="media-body">
      <h5 class="card-title"><a href="https://hgzhangs.github.io">Hongguo Zhang</a></h5>
      <h6 class="card-subtitle">Ph.D. / Research Assistant</h6>
      <p class="card-text">My research interests include spatial temporal data analysis, agricultural land use, time series remote sensing, deep learning.</p>
      <ul class="network-icon" aria-hidden="true">
  
    
    
    
      
    
    
    
    
    
    <li>
      <a href="mailto:hgzhang@uestc.edu.cn" >
        <i class="fas fa-envelope"></i>
      </a>
    </li>
  
    
    
    
    
    
    
    
      
    
    <li>
      <a href="https://www.researchgate.net/profile/Hongguo-Zhang" target="_blank" rel="noopener">
        <i class="ai ai-researchgate"></i>
      </a>
    </li>
  
    
    
    
      
    
    
    
    
    
      
    
    <li>
      <a href="https://scholar.google.com/citations?user=gTmgdnQAAAAJ" target="_blank" rel="noopener">
        <i class="fas fa-graduation-cap"></i>
      </a>
    </li>
  
    
    
    
      
    
    
    
    
    
      
    
    <li>
      <a href="https://github.com/hgzhangs" target="_blank" rel="noopener">
        <i class="fab fa-github"></i>
      </a>
    </li>
  
</ul>

    </div>
  </div>


  
















  </div>
</article>
  </div>

  <div class="page-footer">
    
    
    <div class="container">
      <footer class="site-footer">

  












  
  
  
  
  













  
  <p class="powered-by copyright-license-text">
    ©Designed by Hongguo Zhang
  </p>
  





  
</footer>
    </div>
    
  </div>

  


<script src="/js/vendor-bundle.min.d26509351aa0ff874abbee824e982e9b.js"></script>




  

  
  

  






























<script id="page-data" type="application/json">{"use_headroom":true}</script>



  <script src="/js/wowchemy-headroom.db4755770454eb63685f8de785c0a172.js" type="module"></script>










<script src="/en/js/wowchemy.min.cac6f31121e70d7b5e433048bdeb0af6.js"></script>







  
<div id="modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Cite</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
        <pre><code></code></pre>
      </div>
      <div class="modal-footer">
        <a class="btn btn-outline-primary my-1 js-copy-cite" href="#" target="_blank">
          <i class="fas fa-copy"></i> Copy
        </a>
        <a class="btn btn-outline-primary my-1 js-download-cite" href="#" target="_blank">
          <i class="fas fa-download"></i> Download
        </a>
        <div id="modal-error"></div>
      </div>
    </div>
  </div>
</div>


  <script src="/js/wowchemy-publication.68f8d7090562ca65fc6d3cb3f8f2d2cb.js" type="module"></script>


















</body>
</html>
